<template>
	<div class="mainContent">
		<div class="bread-nav">
			<span class="bread-item">仓储管理</span>
			<span class="bread-icon">&gt;</span>
			<span class="bread-item">调拨管理</span>
			<span class="bread-icon">&gt;</span>
			<span class="bread-item">调拨入库</span>
		</div>
		<!-- <pathTracking :path="Model.path" /> -->
		<div class="addcont">
			<div class="add">
				<img class="plus" src="@/assets/img/button_plus.png" alt="">
				<p class="font" @click="newPage">新建单据</p>
			</div>
		</div>
		<div class="container">
			<div class="searchbox">
				<card :configArr="Model.configArr" @changingCondition="cardEmit"></card>
				<el-row>
					<div class="common-table-title">
						<div class="common-table-icon"></div>
						<div class="common-table-fl">查询条件</div>
					</div>
				</el-row>
				<!-- 搜索框 -->
				<advancedSearch :option="Model.filterOption" @getChild="showChild" @onSearch="toSearch" @onClear="toClear"
				 @onExport="toExport"></advancedSearch>
			</div>
			<div class="table">
				<el-row>
					<div class="common-table-title">
						<div class="common-table-icon"></div>
						<div class="common-table-fl">调拨单出库列表</div>
						<div class="common-btn-group">
							<div class="common-table-btn-item">导出</div>
							<div class="common-table-btn-item" @click="trackingNo()">快递</div>
						</div>
					</div>
				</el-row>
				<div style="padding-left: 16px;background-color: #fff;">
					<el-table stripe :data="Model.tableData" border :row-style="selectedHighlight" @selection-change="handleSelectionChange">
						<el-table-column type="selection" width="50" fixed></el-table-column>
						<el-table-column align="center" prop="number" label="调拨出库单号" width="160">
							<template slot-scope="scope">
								<el-button type="text" @click="toDetial(scope.row)"><a class="detial-link">{{scope.row.number}}</a></el-button>
							</template>
						</el-table-column>
						<el-table-column align="center" v-for="(item,index) in Model.tableHeaderData" :key="item.prop" :prop="item.prop"
						 :width="item.width" :label="item.label">
						</el-table-column>
						<el-table-column label="操作" fixed="right" align="center" width="150">
							<template slot-scope="scope">
								<div class="btnGroup" v-if="scope.row.status == 30">
									<div class="operate-btn" @click="secConfirm(scope.row,'out')">出库</div>
									<div class="operate-btn" @click="storageOperating(scope.row)">编辑</div>
									<div class="operate-btn" @click="secConfirm(scope.row,'obsolete')">作废</div>
								</div>
							</template>
						</el-table-column>
					</el-table>
				</div>

				<!--  -->
				<el-row class="pagination-cont">
					<el-pagination @size-change="handleSizeChange" background @current-change="handleCurrentChange" :current-page="Model.paginationObject.currentPage"
					 :page-sizes="[10, 20, 30, 40]" :pager-count="5" :page-size="Model.paginationObject.pageSize" layout="sizes, prev, pager, next, jumper, slot"
					 :total="Model.paginationObject.total">
						<div class="pagination-slot">
							显示
							<p class="slot-i">{{Model.paginationObject.num1}}</p>
							到
							<p class="slot-i">{{Model.paginationObject.num2}}</p>
							，共
							<p class="slot-i">{{Model.paginationObject.total}}</p>
							记录
						</div>
					</el-pagination>
				</el-row>

			</div>
		</div>
		<!-- 物流单弹框 -->
		<el-dialog :visible.sync="Model.editDialogFlag" top="100px" class="viewDialog">
			<div class="common-table-title">
				<div class="common-table-icon"></div>
				<div class="common-table-fl">物流信息</div>
			</div>
			<div style="padding:30px;background: #fff;">
				<p class="tips" v-if="Model.tipsShow">所选单据已有物流单号，重新创建原单号会被覆盖，请知悉！</p>
				<div class="logistics select">
					<span class="label">物流公司：</span>
					<el-select v-model="Model.companyOptionVal" @change="optionChange" placeholder="请选择">
						<el-option v-for="item in Model.companyOption" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</div>
				<div class="logistics" style="margin-top: 16px;">
					<span class="label">物流单号：</span>
					<el-input v-model="Model.shipmentNumber" :disabled="Model.isDisable" placeholder="获取或者输入物流单号"></el-input>
					<div v-bind:class="[Model.isDisable ? '' : 'disabled', 'btn']" @click="onGetShipmentNo">获取物流单号</div>
				</div>
				<!-- 收货仓 -->
				<div>
					<el-row class="detailTable">
						<div class="detailTableItemTitle">
							<img class="detailTableImgSmall" src="@/assets/img/flower_brown.png" alt="">
							<p class="text">收货仓信息</p>
						</div>
						<ul class="list">
							<li>
								<span>收货仓</span>
								<span>{{Model.inMsg}}</span>
							</li>
						</ul>
					</el-row>
				</div>
				<!-- 发货仓信息 -->
				<div>
					<el-row class="detailTable">
						<div class="detailTableItemTitle">
							<img class="detailTableImgSmall" src="@/assets/img/flower_brown.png" alt="">
							<p class="text">发货仓信息</p>
						</div>
						<ul class="list">
							<li>
								<span>发货仓</span>
								<span>{{Model.outMsg}}</span>
							</li>
						</ul>
					</el-row>
				</div>
				<div class="viewDialogFooter">
					<div class="viewDialogFooterSure" @click="saveLogistics">确定</div>
					<div class="viewDialogFooterCancel" @click="Model.editDialogFlag = false">取消</div>
				</div>
			</div>
		</el-dialog>


	</div>
</template>

<script>
	import pathTracking from "@/components/common/pathTracking";
	import card from '@/components/common/filterBtns';
	import advancedSearch from "@/components/common/filter/advancedSearch";
	import {
		getDateString
	} from "@/assets/js/common.js";
	import Model from "./model.js";
	import Controller from "./controller.js";
	export default {
		name: "outsideAllocation",
		mixins: [Model, Controller],
		components: {
			advancedSearch,
			card,
			pathTracking
		}
	};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
	@import "./index.less";
</style>
